<template>
	<view class="container">
		<navSearchBar title="需求详情" :readonly="false" ></navSearchBar>
		<view class="demand-form">
		<tn-form  :model="form" ref="form" :errorType="['message']" labelPosition="top">
		    <tn-form-item label="需求类型"  prop="demand_type_label" :borderBottom="false" >
		      <tn-input class="company-input" type="text" v-model="form.demand_type_label"  disabled showRightIcon rightIcon="down" placeholder="请选择需求类型" @click="openSelect('DEMAND_TYPE')" />
		    </tn-form-item>
			<tn-form-item label="需求客户"  prop="client_id_label"   :borderBottom="false">
			   <tn-input v-model="form.client_id_label" type="text" placeholder="请选择客户"  disabled showRightIcon rightIcon="down" @click="openSelect('CLIENT_TYPE')"></tn-input>
			   
			</tn-form-item>
		    <tn-form-item label="需求时间" prop="demand_time"  :borderBottom="false">
		      <tn-input v-model="form.demand_time" type="text"  placeholder="请选择时间" disabled showRightIcon rightIcon="down" @click="openSelect('TIME')"></tn-input>
			</tn-form-item>
			<tn-form-item label="联系人"  prop="contact_id_label"   :borderBottom="false">
			   <tn-input v-model="form.contact_id_label" type="text" placeholder="请选择联系人" disabled showRightIcon rightIcon="down" @click="openSelect('CONTACT_PERSON')"></tn-input>
			   
			</tn-form-item>
			<tn-form-item label="预估利润" prop="money"  :borderBottom="false">
				<tn-input v-model="form.money" class="input" type="number" placeholder="请输入预估利润"></tn-input>
				
			</tn-form-item>
			<tn-form-item label="需求描述" prop="description" :borderBottom="false">
				<tn-input v-model="form.description" class="input" type="textarea" placeholder="请输入需求描述" ></tn-input>
				
			</tn-form-item>
		<!-- 	<tn-form-item label="需求状态" prop="demand_status" class="phone-style" :borderBottom="false">
				 <tn-radio-group v-model="form.demand_status" >
				      <tn-radio  v-for="(item, index) in statusList" :key="index" :name="item.value"
				        :disabled="item.disabled">
				        {{item.text}}
				      </tn-radio>
				    </tn-radio-group>
				
			</tn-form-item>
			<tn-form-item label="原因" prop="remark" :borderBottom="false">
				<tn-input v-model="form.remark" class="input" type="textarea" placeholder="请输入原因" ></tn-input>
				
			</tn-form-item> -->
		</tn-form>
		</view>
		 <tn-picker mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></tn-picker>
		<tn-select v-model="selectShow" mode="single" :title="selectTitle" :list="selectList" @confirm="selectConfirm" :labelName="selectText" :valueName="selectValue"></tn-select>
		
		<!-- <tn-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback" :tips="tips"></tn-action-sheet> -->
		<view class="footer">
			<tn-button shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="282rpx" height="72rpx" @click="onSubmit">
				<!-- <text class="tn-icon-add"></text> -->
				提交</tn-button>
		</view>
		<!-- <tn-button :loading="loading" class="footer" shape="round" fontSize="32" fontBold backgroundColor="#3B54DA" fontColor="#FFFFFF" width="194rpx" height="72rpx" @click="onSubmit" >提交</tn-button> -->
	</view>
</template>

<script>
	const DEMAND_TYPE = 'DEMAND_TYPE';
	const CONTACT_PERSON = 'CONTACT_PERSON';
	const TIME = 'TIME';
	const CLIENT_TYPE = 'CLIENT_TYPE'
	export default {
		data() {
			return {
				 clientList:[],
				// tn-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				statusList:[],
				timeShow:false,
				 params: {
					  year: true,
					  month: true,
					  day: false,
					  hour: false,
					  minute: false,
					  second: false
					},
				form:{
					demand_type_label:'',
					demand_time:'',
					contact_id_label:'',
					client_id_label:'',
					money:''
					},
				selectShow:false,
				show:false,
				typeList: [],
				contactList:[],
				actionSheetList:[],
				selectList:[],
				selectTitle:'请选择需求类型',
				selectText:'name',
				selectValue:'value',
				tips: {
						  text: '请选择需求类型',
						  color: '#080808',
						  fontSize: 28
						},
			 rules: {
					 demand_type_label: [{
							required: true,
							message: '请选择联系人',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
					 }],
					 demand_time: [{
							required: true,
							message: '请选择时间',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
					 }],
					 client_id_label:[{
						required: true,
						message: '请选择客户',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					  }],
					  contact_id_label: [{
						required: true,
						message: '请选择联系人',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					  }],
					  money: [{
						required: true,
						message: '请输入利润',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					  }],
					  description: [{
						required: true,
						message: '请输入描述',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					  }],
					  }
								
			}
		},
		onLoad(e){
			console.log('demandetail',e,this.$Route.query)
			this.id = this.$Route.query.id;
			this.getDemandType();
			this.getClientData();
			
			// this.getStatus();
			// this.getDetailData();
		},
		onReady(){
			
			this.$refs.form.setRules(this.rules);
			this.$refs.form.resetFields();
		},
		methods: {
			getDetailData(){
				
				this.$http.get(`/api/member/business/demand/view/${this.id}`).then((res) => {
					if(res.data.status == 200) {
						this.form = res.data.data||{};
						let data = res.data.data||{};
						this.form.client_id_label = data.client.name;
						this.form.client_id =  data.client.id;
						this.form.contact_id_label = data.contact.name;
						this.form.contact_id =  data.contact.id;
						this.form.demand_type_label = data.demand_type.text;
						this.form.demand_type =  data.demand_type.value;
						this.form.demand_time = data.demand_time;
						this.form.demand_status  = data.demand_status.value;
						this.form.description =  data.description;
						this.form.id = data.id;
						this.form.money = data.money.toString();
						console.log('wwwwww',typeof this.form.money)
						this.form.remark = data.remark;
						if(this.form.client_id){
							this.getContactPerson();
						}
					}
				})
			},
			getClientData(){
				this.$http.get('/api/member/business/client/select').then((res) => {
					if(res.data.status == 200) {
						this.clientList = res.data.data||[];
					}
				})
			},
			getStatus(){
				this.$http.get('/api/dictionary/data',{title:'demand_status'}).then((res) => {
					if(res.data.status == 200) {
						this.statusList = res.data.data||[];
					}
				})
			},
			onSubmit(){
				this.$refs.form.validate(valid => {
				  if (valid) {
					console.log('验证通过');
					this.$http.post('/api/member/business/demand/handle',this.form).then((res) => {
						if(res.data.status == 200) {
							this.$tip.success('提交成功');
							
							uni.navigateBack(-1);
						} else {
							this.$tip.toast(res.data.message)
						}
					})
				  } else {
					console.log('验证失败');
				  }
				});
						
				
			},
			getDemandType(){
				this.$http.get('/api/dictionary/data',{title:'demand_type'}).then((res) => {
					if(res.data.status == 200) {
						this.typeList = res.data.data||[];
					}
				})
			},
			getContactPerson(){
				const data = {
					client_id:this.form.client_id
				}
				this.$http.get('/api/business/contact/select').then((res) => {
					if(res.data.status == 200) {
						this.contactList = res.data.data||[];
					}
				})
			},
			actionSheetCallback(index){
				console.log('actionSheetCallback',index);
				this.form.contact_id = this.actionSheetList[index].id;
				this.form.contact_id_label = this.actionSheetList[index].text;
				// setTimeout(()=>{
				// 	this.$refs.form.validate();
				// },50)
				
			},
			selectConfirm(e){
				console.log('selectConfirm',e)
				if(this.type == DEMAND_TYPE){
					this.form.demand_type = e[0].value;
					this.form.demand_type_label = e[0].label;
				} else if(this.type == CLIENT_TYPE){
					this.form.client_id = e[0].value;
					this.form.client_id_label = e[0].label;
					//选择客户清除联系人选择
					this.form.contact_id_label = '';
					this.form.contact_id = '';
					this.getContactPerson();
				} else if(this.type == CONTACT_PERSON) {
					this.form.contact_id = e[0].value;
					this.form.contact_id_label = e[0].label;
				}
				
				// setTimeout(()=>{
				// 	this.$refs.form.validate();
				// },50)
			},
			timeConfirm(data){
				console.log('111111111111',data)
				this.form.demand_time = data.year+'-'+data.month;
				// setTimeout(()=>{
				// 	this.$refs.form.validate();
				// },50)
			},
			openSelect(type){
				this.type = type;
				if(type == DEMAND_TYPE){
					this.selectShow = true;
					this.selectList = this.typeList;
					this.selectTitle = '请选择需求类型';
					this.selectText = 'text';
					this.selectValue = 'value';
				} else if(type == CONTACT_PERSON) {
					//也不能用actionshet
					if(this.form.client_id){
						// this.show = true;
						// this.tips.text = '请选择联系人';
						// this.actionSheetList = this.contactList.map((el) => {el.text = el.nickname;return el});
						this.selectShow = true;
						this.selectList = this.contactList;
						this.selectTitle = '请选择联系人';
						this.selectText = 'name';
						this.selectValue = 'id';
					} else {
						this.$tip.toast('请先选择客户')
					}
				} else if(type == CLIENT_TYPE){
					this.selectShow = true;
					this.selectList = this.clientList;
					this.selectTitle = '请选择客户';
					this.selectText = 'name';
					this.selectValue = 'id';
				} else {
					this.timeShow = true;
				}
				
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.demand-form{
			padding:30rpx 30rpx calc(112rpx + env(safe-area-inset-bottom));
			/deep/.tn-input__right-icon__item{
				margin-right: 30rpx;
				.icon{
					color: #D7D7D7!important;
					font-size: 32rpx;
				}
				
			}
			/deep/.tn-input__textarea{
				height: 202rpx!important;
			}
			/deep/.tn-input-class{
				border-radius: 20rpx;
			}
			// /deep/.tn-icon-up-triangle:before {
			// 	content: "\e7df";
			// }
			// /deep/.tn-input__text{
			// 	padding:0 20rpx;
			// }

		}
		.footer{
			z-index: 10;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			height: calc(112rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;
			background: #FFFFFF;
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			.button{
				
			}
			
		}
	}
	
</style>
